import React, { useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { useNavigate } from 'react-router';

import BaseMap from './baseMap/BaseMap';
import memo from '../common/wrapMemo';
import Control from './control/Control';
import Header from '../header/Header';
import OverLayer from './overLayer/OverLayer';
// import LayerManage from '../layerManage/LayerManage';

import modules from '../../store/modules';
import LogManage from '../logManage/LogManage';
import UpdatePassword from '../user/UpdatePassword';

import style from './Map.module.scss';
import api from '../../api';

const { actionCreators } = modules;

const { L } = window;

const Map = memo((props) => {
    const { viewport, mapInfo, userInfo, menu, layerFields,dispatch } = props;

    const navigate = useNavigate();
    const layerGroup = useRef(L.layerGroup());

    const [map, setMap] = useState(null);
    
    useEffect(() => {
        getLayerFields();
    },[]);

    useEffect(async () => {
        const localUser = localStorage.getItem('user');

        if (!userInfo.get('userId')) {
            if (!localUser) {
                navigate('/login');
                return;
            } else {
                dispatch(actionCreators.userInfo.update(JSON.parse(localUser)));
            }
        }
    }, [userInfo]);

    // 获取图层名称字典表
    const getLayerFields = () => {
        api.search.queryLayerFields().then((res) => {
            const {code, data} = res.data;
            if(code === 200){
                dispatch(actionCreators.layer.update(data));
            }
        }).catch(err => {
            console.log(err);
        })
    };

    const onCloseMenuDialog = () => {
        dispatch(actionCreators.menu.change(''));
    };

    return (
        <div className={style.mapContainer}>
            <BaseMap
                map={map}
                mapInfo={mapInfo}
                viewport={viewport}
                onMapLoaded={setMap}
                layerGroup={layerGroup.current}
            />
            <Header />
            <Control map={map} />
            <OverLayer map={map} userInfo={userInfo} layerFields={layerFields}/>
            {/* {menu === '数据管理' && <LayerManage onClose={onCloseMenuDialog} userInfo={userInfo} />} */}
            {menu === '日志管理' && <LogManage onClose={onCloseMenuDialog} />}
            {menu === '修改密码' && (
                <UpdatePassword onClose={onCloseMenuDialog} userInfo={userInfo} />
            )}
            {/* <Loading /> */}
        </div>
    );
});

Map.displayName = 'MapContainer';

Map.propTypes = {
    map: PropTypes.object,
    setMap: PropTypes.func,
    mapInfo: PropTypes.object,
    viewport: PropTypes.object,
    userInfo: PropTypes.object,
    menu: PropTypes.string,
    layerFields: PropTypes.object,
};

function mapStateToProps(state) {
    return {
        mapInfo: state.get('mapInfo'),
        viewport: state.get('viewport'),
        menu: state.get('menu'),
        userInfo: state.get('userInfo'),
        layerFields: state.getIn(['layer','layerFields'])
    };
}

export default connect(mapStateToProps)(Map);
